<template>
  <div style="text-align: left">
    费用记录查询
  </div>
  <hr/>
  <div style="text-align: left;font-weight: bolder">
    患者信息查询
    <el-form :inline="true" :model="formRecord">
      <el-form-item label="病历号">
        <el-input  placeholder="请输入患者病历号" clearable  v-model="formRecord.caseNumber"/>
      </el-form-item>
      <el-form-item label="患者姓名">
        <el-input  placeholder="请输入患者姓名" clearable v-model="formRecord.realName"/>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="loadRegister">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <hr/>
  <div style="text-align: left;font-weight: bolder">
    患者信息确认
    <el-form :inline="true" :model="formRegRecord">
      <el-form-item label="姓名">
        <el-input   clearable  v-model="formRegRecord.realName" readonly/>
      </el-form-item>
      <el-form-item label="身份证">
        <el-input  clearable v-model="formRegRecord.cardNumber" readonly/>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input  clearable v-model="formRegRecord.age" readonly/>
      </el-form-item>
      <el-form-item label="性别">
        <el-input   clearable v-model="formRegRecord.gender" readonly/>
      </el-form-item>

    </el-form>
  </div>
  <div>
    项目金额:{{sum}}元
  </div>
  <el-table :data="payMoneyList" style="width: 100%"  @selection-change="payTotal">
    <el-table-column type="selection" width="55" />
    <el-table-column label="项目名称" prop="payName"/>
    <el-table-column label="单价" prop="payPrice"/>
    <el-table-column label="类型" prop="payType"/>
    <el-table-column label="规格" prop="payFormat"/>
    <el-table-column label="数量" prop="payNumber" width="80"/>
    <el-table-column label="开立时间" prop="payTime"/>
    <el-table-column label="状态" prop="payState"/>


  </el-table>
</template>

<script setup>
import {reactive, ref} from "vue";
import axios from "axios";
//定义表单查询条件
const formRecord=reactive({
  caseNumber:'',
  realName:''
});
//患者信息确认表单
const formRegRecord=reactive({
  realName:'',
  cardNumber:'',
  age:'',
  gender:''
});
//定义费用明细列表
const payMoneyList=ref([]);
const total=ref();

//定义函数加载患者信息
function loadRegister(){
  axios.get("http://localhost/his/queryRegisterPay?caseNumber="
      +formRecord.caseNumber+"&realName="+formRecord.realName)
      .then((response)=>{
         //response.data.forEach((key)=>{
         for(var key in response.data){
           //给表单扩展属性，并且给属性赋值
           formRegRecord[key]=response.data[key];
         }
         //});

        //console.log(formRegRecord)
          //异步请求嵌套
        loadMoneyList();
      })
      .catch((error)=>{
        console.log(error);
      });
}
const sum=ref(0);
//定义函数发生发送ajax请求
function loadMoneyList(){
  sum.value=0;
  axios.get("http://localhost/his/queryPayList?caseNumber="
      +formRecord.caseNumber+"&realName="+formRecord.realName)
      .then((response)=>{
          payMoneyList.value=response.data.payRecords;
          total.value=response.data.total;
          payMoneyList.value.forEach((r)=>{
          sum.value+=(r.payPrice*r.payNumber);
        });
      })
      .catch((error)=>{
        console.log(error);
      });

}


function payTotal(rows){
  sum.value=0;
  rows.forEach((r)=>{
    sum.value+=(r.payPrice*r.payNumber);
  });

}
</script>

<style>

</style>